<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Split Pane</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }

        .split-pane {
            display: flex;
            height: 100%;
        }

        .pane {
            position: relative;
            flex: 1;
            overflow: auto;
            padding: 20px;
        }

        .left,
        .right {
            flex: 1 1 auto;
            /* 使得元素默认平分空间 */
            flex-basis: 50%;
            /* 初始时各占一半 */
        }

        .resizer {
            flex: 0 0 10px;
            /* 调整器宽度固定为10px */
            cursor: col-resize;
            z-index: 1;
            background-color: #ccc;
            /* 可以添加一些样式来改善用户体验，比如鼠标悬停时的效果 */
        }
    </style>
</head>

<body>

    <div class="split-pane">
        <div class="pane left">
            <p>左侧区域内容</p>
        </div>
        <div class="resizer"></div>
        <div class="pane right">
            <p>右侧区域内容</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const resizer = document.querySelector('.resizer');
            let isResizing = false;
            let startX;
            let leftPaneWidth;

            resizer.addEventListener('mousedown', function (e) {
                isResizing = true;
                startX = e.clientX;
                leftPaneWidth = parseFloat(window.getComputedStyle(document.querySelector('.left')).width);

                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                document.addEventListener('mouseleave', onMouseUp); // 添加mouseleave事件，以防鼠标移出窗口时未释放  
            });

            function onMouseMove(e) {
                if (!isResizing) return;
                e.preventDefault();
                const shiftX = e.clientX - startX + 40;
                const newWidth = Math.max(50, leftPaneWidth + shiftX); // 最小宽度设置为50，防止过小  
                document.querySelector('.left').style.flexBasis = newWidth + 'px';
                document.querySelector('.right').style.flexBasis = 'calc(100% - ' + (newWidth + 10) + 'px)'; // 加上调整器的宽度  
            }

            function onMouseUp() {
                isResizing = false;
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                document.removeEventListener('mouseleave', onMouseUp);
            }
        });
    </script>

</body>

</html>